import { ITodoData } from "./typing";

export default class TodoDom {
    todoWrapper: HTMLElement
    constructor(wrapper: HTMLElement) {
        this.todoWrapper = wrapper
    }
    createTodoItemDom(todo: ITodoData) {
        return `
            <input type="checkbox" ${todo.completed ? "checked" : ""} data-id="${todo.id}">
            <span>${todo.content}</span>
            <button data-id="${todo.id}">删除</button>
        `
    }
    // 添加一个div到todo-list里面
    addDom(todo:ITodoData):void {
        const oDiv = document.createElement('div')
        oDiv.className = 'todo-item'
        oDiv.innerHTML = this.createTodoItemDom(todo)
        this.todoWrapper.appendChild(oDiv)
    }
    // 修改视图
    changeDom(dom: HTMLElement) {
        const parentNode = dom.parentNode as HTMLElement
        parentNode.querySelector('input').checked = true
        parentNode.querySelector('span').style.textDecoration = "line-through"

    }

}

// 操作dom
// 添加dom
// 修改dom
// 删除dom
